<template>
  <div>
    <div class="card-header">
      <px-radio-group v-model="className" @change="getChartData">
        <px-radio-button v-for="item in classNameList" :key="item.code" :label="item.code">{{ item.name }}</px-radio-button>
      </px-radio-group>
      <div class="flex items-center">
        <px-radio-group v-model="dateType" @change="getChartData">
          <px-radio-button label="DAY">天</px-radio-button>
          <px-radio-button label="WEEK">周</px-radio-button>
          <px-radio-button label="MONTH">月</px-radio-button>
          <px-radio-button label="YEAR">年</px-radio-button>
        </px-radio-group>
      </div>
    </div>
    <div>
      <px-row style="width: 100%; margin: 0" :gutter="8">
        <px-col :span="8" style="padding-left: 0">
          <px-card shadow="never">
            <template #header>
              <div class="card-header">
                <span class="card-title">缺失统计</span>
              </div>
            </template>
            <StaticCount :className="className" :chartsData="chartsData" :startTime="startTime" :endTime="endTime" />
          </px-card>
        </px-col>
        <px-col :span="8">
          <px-card shadow="never">
            <template #header>
              <div class="card-header">
                <span class="card-title">缺失趋势</span>
                <px-tooltip content="下载" placement="top">
                  <px-button class="button" type="primary" link icon="Download" @click="handleDownload(stackRef)" />
                </px-tooltip>
              </div>
            </template>
            <StackedLine ref="stackRef" :className="className" :chartsData="chartsData" :startTime="startTime" :endTime="endTime" />
          </px-card>
        </px-col>
        <px-col :span="8" style="padding-right: 0">
          <px-card shadow="never">
            <template #header>
              <div class="card-header">
                <span class="card-title">缺失类型占比</span>
                <px-tooltip content="下载" placement="top">
                  <px-button class="button" type="primary" link icon="Download" @click="handleDownload(pieRef)" />
                </px-tooltip>
              </div>
            </template>
            <PieCharts ref="pieRef" :className="className" :chartsData="chartsData" :startTime="startTime" :endTime="endTime" />
          </px-card>
        </px-col>
      </px-row>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_SAFEMANAGE_ANALYZE"
});

import { analysisDefect } from "@/api/defect";
import { onMounted, reactive, ref, toRefs } from "vue";
import StaticCount from "./components/StaticCount.vue";
import PieCharts from "./components/PieCharts.vue";
import StackedLine from "./components/StackedLine.vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
const router = useRouter();

const pieRef = ref("");
const stackRef = ref("");

const state = reactive<any>({
  className: "MACHINE",
  dateType: "DAY",
  startTime: "",
  endTime: "",
  chartsData: {}
});
const { className, dateType, startTime, endTime, chartsData } = toRefs(state);

const classNameList = JSON.parse(localStorage.getItem("classList"));
className.value = classNameList && classNameList[0]?.code;

const getChartData = async () => {
  const params = {
    className: className.value,
    dateType: dateType.value
  };
  chartsData.value = await analysisDefect(params);
  const nameFormats = {
    "6S": "6S缺失",
    ENV: "环境缺失",
    EQP: "设备缺失"
  };
  chartsData.value.missingTypeStatMap = Object.entries(chartsData.value.missingTypeStatisticsMap).map(([code, value]) => ({
    name: nameFormats[code],
    value,
    code
  }));
  if (dateType.value === "DAY") {
    startTime.value = dayjs().subtract(0, "day").format("YYYY-MM-DD 00:00:00");
    endTime.value = dayjs().format("YYYY-MM-DD 23:59:59");
  } else if (dateType.value === "WEEK") {
    startTime.value = dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss");
    endTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  } else if (dateType.value === "MONTH") {
    startTime.value = dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss");
    endTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  } else if (dateType.value === "YEAR") {
    startTime.value = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss");
    endTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
  }
};

onMounted(() => {
  getChartData();
});

const handleDownload = ref => {
  ref.downLoad();
};
</script>

<style lang="scss" scoped>
:deep(.px-card__header) {
  border: none;
}

:deep(.px-card__body) {
  padding: 0 15px !important;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.circle {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  line-height: 16px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
}

.first {
  background-color: #ef4444;
}

.second {
  background-color: #ff771e;
}

.third {
  background-color: #f59e0b;
}

.card-title {
  width: 280px;
  height: 32px;
  padding-left: 8px;
  border-left: 3px solid #3b82f6;
  background-image: linear-gradient(to right, rgb(59, 130, 246), #fff);
  background: linear-gradient(270deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.24) 100%);
  font-size: 18px;
  font-family:
    PingFangSC-Medium,
    PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 32px;
}
</style>
